<%@include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<s:layout-render name="/WEB-INF/jsp/common/layout_popups.jsp"
                 title="Customize Group Dashboard">
    <s:layout-component name="body">
        <script type="text/javascript" src="js/widget/h5utils.js"></script>
        <script type="text/javascript" src="js/widget/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="js/widget/jquery-ui-1.8.22.custom.min.js"></script>
        <link type="text/css" href="css/widget/jquery-ui-1.8.22.custom.css" rel="stylesheet">

        <style type="text/css">
            li {
                list-style: none;
            }

            li a {
                text-decoration: none;
                color: #000;
                margin: 10px;
                width: 150px;
                border: 3px dashed #999;
                background: #eee;
                padding: 10px;
                display: block;
            }

            *[draggable=true] {
                -moz-user-select:none;
                -khtml-user-drag: element;
                cursor: move;
            }

            *:-khtml-drag {
                background-color: rgba(238,238,238, 0.5);
            }

            li a:hover:after {
                content: ' (drag me)';
            }

            ul {
                /*margin-left: 330px;
                min-height: 300px;
                */}

            li.over {
                border-color: #333;
                background: #ccc;
            }

            .placeclass {
                height: 282px;
                width: 317px;
                float: left;
                margin-top: 0;
            }
            /* bin stuff 1 */

            #bin {
                background: url(images/place2.png) top right no-repeat;
                height: 282px;
                width: 317px;
                float: left;
                position: relative;
                margin-top: 0;
            }

            #bin.over {
                background: url(images/place2.png) top left no-repeat;
            }

            #bin p {
                font-weight: bold;
                text-align: center;
                position: absolute;
                bottom: 20px;
                width: 166px;
                font-size: 32px;
                color: #fff;
                text-shadow: #000 2px 2px 2px;
            }

            /* bin stuff  1*/
            /* bin stuff 2 */

            #bin2 {
                background: url(images/place2.png) top right no-repeat;
                height: 282px;
                width: 317px;
                float: left;
                position: relative;
                margin-top: 0;
            }

            #bin2.over {
                background: url(images/place2.png) top left no-repeat;
            }

            #bin2 p {
                font-weight: bold;
                text-align: center;
                position: absolute;
                bottom: 20px;
                width: 166px;
                font-size: 32px;
                color: #fff;
                text-shadow: #000 2px 2px 2px;
            }

            /* bin stuff  2*/
        </style>
        <div style="width:990px; margin-left: -50px; height:130px; background-image:url(images/header.png)"></div>
        <table>
            <tr><th>My Widgets List</th></tr>
            <tr>
                <td align="center" valign="top"><article>
                        <ul id="list">
                            <li><a id="calendar" href="#">Calendar</a></li>
                            <li><a id="dotolista" href="#">To do List</a></li>
                            <li><a id="convertera" href="#">Converter</a></li>
                        </ul>
                    </article></td>
                <td valign="top"><div id="place"></div>
                    <div id="bin" class="bin" style="margin-right:15px;"></div></td>
                <td valign="top"><div id="place2"></div>
                    <div id="bin2" class="bin2"></div></td>
            </tr>
        </table>
        <br/>
        <br/>
        <br/>
        <br/>
        <div id="dotolist" style="display:none"> <img src="images/close-btn.png" width="20px" style="cursor:pointer; margin-bottom: -7px;" onClick="closetodolist();" /><br/>
            <textarea rows="10" cols="25" style="background-image:url(images/notes.png); background-repeat:no-repeat; resize:none; font-size:24px; font-family:'Comic Sans MS', cursive;"></textarea>
        </div>
        <div id="converter" style="display:none"> <img src="images/close-btn.png" width="20px" style="cursor:pointer;" onClick="closeconverter();" /><br/>
            <iframe src="http://oberonmedia.com.au/juanTest/currency_widget/tester.php" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:240px; height:250px; margin-top:-10px;" allowTransparency="true"></iframe>
        </div>
        <div id="datepicker" class="calendar" style="display:none"> <img src="images/close-btn.png" width="20px" style="cursor:pointer; margin-bottom: -5px;" onClick="closecalendar();" /> </div>
        <script type="text/javascript">

            function closecalendar()
            {
                $('#datepicker').hide();
                //$('#datepicker').remove();
                var tit = $('#datepicker').attr("title");
                if(tit == "bin1")
                {
                    $('#bin').show();
                }
                if(tit == "bin2")
                {
                    $('#bin2').show();
                }
            $('#calendar').show();
        }
        function closeconverter()
        {
            $('#converter').hide();
            var tit = $('#converter').attr("title");
            if(tit == "bin1")
            {
                $('#bin').show();
            }
            if(tit == "bin2")
            {
                $('#bin2').show();
            }
            $('#convertera').show();
        }

        function closetodolist()
        {
            $('#dotolist').hide();
            var tit = $('#dotolist').attr("title");
            if(tit == "bin1")
            {
                $('#bin').show();
            }
            if(tit == "bin2")
            {
                $('#bin2').show();
            }
            $('#dotolista').show();
        }

        $(function() {
            $( "#datepicker" ).datepicker();
        });

        var eat = ['dropped!'];
        var yum = document.createElement('p');
        var msie = /*@cc_on!@*/0;
        yum.style.opacity = 1;

        var links = document.querySelectorAll('li > a'), el = null;
        for (var i = 0; i < links.length; i++) {
            el = links[i];
  
            el.setAttribute('draggable', 'true');
  
            addEvent(el, 'dragstart', function (e) {
                e.dataTransfer.effectAllowed = 'copy'; // only dropEffect='copy' will be dropable
                e.dataTransfer.setData('Text', this.id); // required otherwise doesn't work
            });
        }
  
        /* Star Bin 1 actions for drag and drop  */

        var bin = document.querySelector('#bin');

        addEvent(bin, 'dragover', function (e) {
            if (e.preventDefault) e.preventDefault(); // allows us to drop
            this.className = 'over';
            e.dataTransfer.dropEffect = 'copy';
            return false;
        });

        // to get IE to work
        addEvent(bin, 'dragenter', function (e) {
            this.className = 'over';
            return false;
        });

        addEvent(bin, 'dragleave', function () {
            this.className = '';
        });

        addEvent(bin, 'drop', function (e) {
            if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???

            var el = document.getElementById(e.dataTransfer.getData('Text'));
    
            //el.parentNode.removeChild(el);

            // stupid nom text + fade effect
            bin.className = '';
            yum.innerHTML = eat[parseInt(Math.random() * eat.length)];

            var y = yum.cloneNode(true);
            //bin.appendChild(y);
	
            //add calendar
            var pepe = e.dataTransfer.getData('Text');
            if(pepe == 'calendar')
            {
                //document.getElementById('datepicker').style.display = "block";
                $('#datepicker').show();
                $('#bin').hide();
                $('#calendar').hide();
                /*$('#bin').remove();*/
                $('#place').append($('.calendar'));
                $('#datepicker').attr("title", "bin1");
            }
            if(pepe == 'dotolista')
            {
                //document.getElementById('datepicker').style.display = "block";
                $('#dotolist').show();
                $('#bin').hide();
                $('#dotolista').hide();
                /*$('#bin').remove();*/
                $('#place').append($('#dotolist'));
                $('#dotolist').attr("title", "bin1");
            }
	
            if(pepe == 'convertera')
            {
                //document.getElementById('datepicker').style.display = "block";
                $('#converter').show();
                $('#bin').hide();
                $('#convertera').hide();
                /*$('#bin').remove();*/
                $('#place').append($('#converter'));
                $('#converter').attr("title", "bin1");
            }
	
            setTimeout(function () {
                var t = setInterval(function () {
                    if (y.style.opacity <= 0) {
                        if (msie) { // don't bother with the animation
                            y.style.display = 'none';
                        }
                        clearInterval(t); 
                    } else {
                        y.style.opacity -= 0.1;
                    }
                }, 50);
            }, 250);

            return false;
        });
  
        /* End Bin1 actions for drag and drop  */

        /* Star Bin 2 actions for drag and drop  */

        var bin2 = document.querySelector('#bin2');

        addEvent(bin2, 'dragover', function (e) {
            if (e.preventDefault) e.preventDefault(); // allows us to drop
            this.className = 'over';
            e.dataTransfer.dropEffect = 'copy';
            return false;
        });

        // to get IE to work
        addEvent(bin2, 'dragenter', function (e) {
            this.className = 'over';
            return false;
        });

        addEvent(bin2, 'dragleave', function () {
            this.className = '';
        });

        addEvent(bin2, 'drop', function (e) {
            if (e.stopPropagation) e.stopPropagation(); // stops the browser from redirecting...why???

            //var el = document.getElementById(e.dataTransfer.getData('Text'));
    
            //el.parentNode.removeChild(el);

            // stupid nom text + fade effect
            bin2.className = '';
            yum.innerHTML = eat[parseInt(Math.random() * eat.length)];

            var y = yum.cloneNode(true);
            //bin2.appendChild(y);
	
            //add calendar
            var pepe2 = e.dataTransfer.getData('Text');
            if(pepe2 == 'calendar')
            {
                //document.getElementById('datepicker').style.display = "block";
                $('#datepicker').show();
                $('#bin2').hide();
                $('#calendar').hide();
                /*$('#bin').remove();*/
                $('#place2').append($('.calendar'));
                $('#datepicker').attr("title", "bin2");
            }
            if(pepe2 == 'dotolista')
            {
                //document.getElementById('datepicker').style.display = "block";
                $('#dotolist').show();
                $('#bin2').hide();
                $('#dotolista').hide();
                /*$('#bin').remove();*/
                $('#place2').append($('#dotolist'));
                $('#dotolist').attr("title", "bin2");
            }
	
            if(pepe2 == 'convertera')
            {
                //document.getElementById('datepicker').style.display = "block";
                $('#converter').show();
                $('#bin2').hide();
                $('#convertera').hide();
                /*$('#bin').remove();*/
                $('#place2').append($('#converter'));
                $('#converter').attr("title", "bin2");
            }
	
            setTimeout(function () {
                var t = setInterval(function () {
                    if (y.style.opacity <= 0) {
                        if (msie) { // don't bother with the animation
                            y.style.display = 'none';
                        }
                        clearInterval(t); 
                    } else {
                        y.style.opacity -= 0.1;
                    }
                }, 50);
            }, 250);

            return false;
        });
  
        /* End Bin2 actions for drag and drop  */
        </script>
    </s:layout-component>
</s:layout-render>
